<template>
    <div class="basic-from">
        <v-dialog
            title="查看配套设施信息"
            :show.sync="dialogVisible"
            class="dialogForm"
            width="1200px"
            :close-on-click-modal="false">
            <div class="card-box">
                <div class="card-title">物业信息</div>
                <el-form
                    ref="bulletInformation-form"
                    class="form-wrap"
                    label-position="top"
                    :model="bulletInformation">
                    <el-form-item label="楼栋名称" prop="buildingName">
                        <span class="in_txt">{{bulletInformation.buildingName}}</span>
                    </el-form-item>
                    <el-form-item label="所属楼层" prop="floorNum">
                        <span class="in_txt">{{bulletInformation.floorNum}}</span>
                    </el-form-item>
                    <el-form-item label="物业名称" prop="propertyName">
                        <span class="in_txt">{{bulletInformation.propertyName}}</span>
                    </el-form-item>
                    <el-form-item label="曾用名" prop="usedName">
                        <span class="in_txt">{{bulletInformation.usedName}}</span>
                    </el-form-item>
                     <el-form-item label="层高(m)" prop="floorHeight">
                        <span class="in_txt">{{bulletInformation.floorHeight}}</span>
                    </el-form-item>
                      <el-form-item label="净高(m)" prop="clearHeight">
                        <span class="in_txt">{{bulletInformation.clearHeight}}</span>
                    </el-form-item>
                     <el-form-item label="楼板厚度(厘米)" prop="thickness">
                        <span class="in_txt">{{bulletInformation.thickness}}</span>
                    </el-form-item>
                     <el-form-item label="承重(公斤/平米)" prop="loadBearing">
                        <span class="in_txt">{{bulletInformation.loadBearing}}</span>
                    </el-form-item>
                    <el-form-item label="物业地址" prop="address" class="full">
                        <span class="in_txt">{{bulletInformation.address}}</span>
                    </el-form-item>
                    <!--<div class="full">
                        <el-row :gutter="10">
                            <el-col :span="6">
                                <el-form-item label="物业名称" prop="propertyName">
                                    <span class="in_txt">{{bulletInformation.propertyName}}</span>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="曾用名" prop="usedName">
                                    <span class="in_txt">{{bulletInformation.usedName}}</span>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="物业地址" prop="address" class="col-two">
                                    <span class="in_txt">{{bulletInformation.address}}</span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </div>-->
                    <el-form-item label="物业大类" prop="projectType">
                        <span class="in_txt">{{getCardTypeValue(bulletInformation.projectType,propertyTypes)}}</span>
                    </el-form-item>
                    <el-form-item label="物业小类" prop="projectSubclassType">
                        <span class="in_txt">{{getCardTypeValue(bulletInformation.projectSubclassType,propertyUseTypesFilter)}}</span>
                    </el-form-item>
                    <el-form-item label="请选择物业统计类别" prop="statisticType">
                        <span class="in_txt">{{getCardTypeValue(bulletInformation.statisticType,statisticTypes)}}</span>
                    </el-form-item>
                    <el-form-item label="物业细类" prop="projectSubclassType">
                        <span class="in_txt">{{getCardTypeValue(bulletInformation.projectSubdivide,projectSubdivides)}}</span>
                    </el-form-item>
                    <el-form-item label="规划用途" prop="planUse">
<!--                        <span class="in_txt">{{bulletInformation.planUse}}</span>-->
											<span class="in_txt">{{getCardTypeValue(bulletInformation.planUse,planUses)}}</span>
                    </el-form-item>
                    <el-form-item label="停车位数(个)" prop="parkingSpotNum" v-if="bulletInformation.planUse === '停车场'">
                        <span class="in_txt">{{bulletInformation.parkingSpotNum}}</span>
                    </el-form-item>
									<el-form-item label="占地面积(m²)" prop="floorSpace">
										<span class="in_txt">{{bulletInformation.floorSpace}}</span>
									</el-form-item>
                    <el-form-item label="建筑面积(m²)" prop="buildArea">
                        <span class="in_txt">{{bulletInformation.buildArea}}</span>
                    </el-form-item>
                    <el-form-item label="套内面积(m²)" prop="insideArea">
                        <span class="in_txt">{{bulletInformation.insideArea}}</span>
                    </el-form-item>
                    <el-form-item label="经营性质" prop="operation">
                        <span class="in_txt">{{getCardTypeValue(bulletInformation.operation,operations)}}</span>
                    </el-form-item>
                    <el-form-item label="非经营面积(m²)" prop="unmanagedArea">
                        <span class="in_txt">{{bulletInformation.unmanagedArea}}</span>
                    </el-form-item>
                    <el-form-item label="经营面积(m²)" prop="managedArea">
                        <span class="in_txt">{{bulletInformation.managedArea}}</span>
                    </el-form-item>
                    <el-form-item label="分摊公用面积(m²)" prop="noApportionedArea">
                        <span class="in_txt">{{bulletInformation.noApportionedArea}}</span>
                    </el-form-item>

									<el-form-item label="公服数量" prop="facilityNumber">
										<span class="in_txt">{{bulletInformation.facilityNumber}}</span>
									</el-form-item>
									<el-form-item label="公服单位" prop="facilityUnit">
										<span class="in_txt">{{getCardTypeValue(bulletInformation.facilityUnit,facilityUnits)}}</span>
									</el-form-item>
									<el-form-item label="公服层级" prop="facilityLevel">
										<span class="in_txt">{{getCardTypeValue(bulletInformation.facilityLevel,facilityLevels)}}</span>
									</el-form-item>
									<el-form-item label="覆盖半径(m)" prop="radius">
										<span class="in_txt">{{bulletInformation.radius}}</span>
									</el-form-item>

                    <el-form-item label="移交方式" prop="transferType">
                        <span class="in_txt">{{getCardTypeValue(bulletInformation.transferType,transferModeOption)}}</span>
                    </el-form-item>
                    <el-form-item label="移交单位" prop="transferUnit">
                        <span class="in_txt">{{bulletInformation.transferUnit}}</span>
                    </el-form-item>
                    <el-form-item label="移交日期" prop="receiveTime">
                        <span class="in_txt">{{bulletInformation.receiveTime}}</span>
                    </el-form-item>
                    <el-form-item label="备注" prop="remarks" class="full">
                        <span class="in_txt">{{bulletInformation.remarks}}</span>
                    </el-form-item>
                </el-form>
            </div>
            <span slot="foot">
                 <el-button size="small" class="dialog-button-right" @click="handleDialogClear">关闭</el-button>
            </span>
        </v-dialog>
    </div>
</template>

<script>
    export default {
        name: "supporting-facilities-information",
        created() {
            this.propertyTypes = this.getDict("property_types")
            this.planUses = this.getDict('property_use_types')
            this.transferModeOption = this.getDict('transfer_types')
            this.propertyUseTypes = this.getDict("property_use_types")
					this.operations = this.getDict("property_operations")
					this.projectSubdivides = this.getDict("project_subdivide")
					this.facilityLevels = this.getDict("facility_levels");
					this.facilityUnits = this.getDict("facility_units");
					this.statisticTypes = this.getDict("statistic_types");
        },
        data() {
            return {
                dialogVisible: false,
                bulletInformation: {
                    buildingName: '',
                    floorNum: '',
                    propertyName: '',
                    usedName: '',
                    address: '',
                    initialType: '',
                    projectType: '',
                    projectSubclassType: '',
                    planUse: '',
                    parkingSpotNum: '',
                    buildArea: '',
										operation:'10',
										insideArea:'',
                    unmanagedArea: '',
                    managedArea: '',
                    noApportionedArea: '',
                    transferType: '',
                    transferUnit: '',
                    receiveTime: '',
                    remarks: '',
									projectSubdivide:'',
									facilityNumber: "",
									facilityUnit: "",
									facilityLevel:"",
									radius:""
                },
                propertyTypes: [],
                propertyUseTypes: [],
                propertyUseTypesFilter: [],
                planUses: [],
                transferModeOption: [],
							projectSubdivides:[],
							operations: [],
							facilityUnits:[],
							facilityLevels:[],
                            statisticTypes:[]
            }
        },
        methods: {
            //打开弹框
            showDialog(item) {
                this.dialogVisible = true
                if (item) {
                    this.bulletInformation = item.row
                    this.changeProjectType(this.bulletInformation.projectType)
                }
            },
            //取消
            handleDialogClear() {
                this.dialogVisible = false
            },
            //根据物业类型，获取对应的物业用途
            changeProjectType(val){
                //重置物业用途
                this.propertyUseTypesFilter = []
                if(val){
                    //过滤物业用途
                    this.propertyUseTypesFilter = this.propertyUseTypes.filter(ut => ut.value.indexOf(val) == 0)
                }
            },
            //对应value取label
            getCardTypeValue(num, sum){
                let arr = sum.filter(e=>e.value === num)
                if (arr.length > 0) {
                    return arr[0].label
                } else {
                    return num
                }
            }
        }
    }
</script>

<style scoped lang="scss">
    .dialogForm {
			.card-box {
				padding: 0;
				.in_txt {
					color: #999999;
				}
			}
    }
</style>
